Cascading Style Sheets
(first proposed 1996)
CSS code validator at http://jigsaw.w3.org/css-validator

The CSS Zen Garden, http://www.csszengarden.com , shows the power and flexibility of CSS.
The W3C’s description of CSS can be found at http://www.w3.org/Style
Different browsers do not support it in exactly the same way.
See http://caniuse.com/#search=css3  for a list of CSS3 features supported by various browsers.

Done properly, ONE CSS file can format many pages, and save the commands.
It helps keep style separate from structure. It is easier to maintain, usually.

Inline
	Affects one html tag.
Embedded
	In header, applies to whole page, or to named sections
External
	In a file, referred to
Imported
	External, borrowed

Each rule has two parts: a selector and a declaration.
Declaration gives attribute and value.
Multiple declarations can be done for the same selector “;”.

body {color: blue}
body {background-color: yellow }
body { color: white; background-color: orchid; }

STYLE can be used for ‘inline’:
Apply format as you define the section.
<h1 style="color:#cc0000">This is displayed as a red heading</h1>
<h1 style="color:#cc0000;background-color:#cccccc">
This is displayed as a red heading on a gray background</h1>

Global styles, such as applied to BODY, are over-ridden by inline styles, 
applied here to header1.

Inline rarely used, but can do tweaking.

Other commands can be done inline, of course:
p { font-family: Arial, Helvetica, sans-serif; }
This says, for the paragraph, use Arial, if available, with Helvetica and sans-serif as backup.

Style can be in the header:
<style>
body { background-color: #E6E6FA; color: #191970;}
</style>
This allows formatting to be concentrated in the header.
It can be overridden (locally) by inline.

If you want all of your paragraphs to share a formatting, you may:
p { font-size: .90em; text-indent: 3em; }

You may format unordered lists: ul { font-weight: bold; }

You can declare a section to be the “nav” (or navigation) section.
nav { font-weight: bold;
font-size: 1.25em;
word-spacing: 1em;}
This gives different formatting for the navigation section.

You can declare a section of your Web page to be a (named) division:
<div id="feature"> Creature </div>

You may affect the style of the ‘feature’:
#feature { color: #333333; }

You might wish to format your footer:
footer { color: #333333; font-size: .75em; font-style: italic; }

Use an id selector to configure a single element on a web page. 
Use a class selector to configure one or more elements on a web page.

Many find it helpful to put styles in a separate file:
<link rel="stylesheet" href="color.css">
This allows you to use the same formatting commands in different pages.
(This is External; Imported is when you use someone else’s file.)
Only CSS rules appear; no HTML.
/* add comments to CSS files this way */

Centering your Web page:
#wrapper 
{ width: 960px;
   margin-left: auto;
   margin-right: auto; }
If margin-left and margin-right are both auto, it automatically centers in your web page.

About colors: RGB
Each is two HEX digits (0..9,A..F)
(256 Reds, 256 Greens, 256 Blues, 16777216 possible colors!)
Counting A as 10, F as 15, each digit has a value 0..15 (base 10).
Given two hex digits for a color, multiply the first times 16, and add the second.
That gives you the (0..255) code for R, G, or B, if you need it.

The Web Safe colors use only 00, 33, 66, 99, CC, and FF.
(There are 216 web safe colors.)

Ways to spcify color:
p { color: red;} color name
p { color: #FF0000; } Hexadecimal color value
p { color: #F00; } Shorthand web-safe
p { color: rgb(255,0,0); } Decimal color value (RGB triplet)
p { color: hsl(0, 100%, 50%); } HSL color values

CSS3 Color Module allows
configure transparency of the color with 
	RGBA (Red, Green, Blue, Alpha)
	HSLA (Hue, Saturation,Lightness, Alpha) color. Also new to CSS3 is the 
	opacity property
	CSS gradient backgrounds

FONTS and STUFF
Remember, the USER must have the font on THEIR machine

font-family	e.g. serif, sans-serif, fantasy, monospace, or cursive
font-size
	pt (standard font point sizes)
	px (pixels)
	em (width of M)
	percentage
	named (xx-small, x-small, small, medium, large, x-large, and xx-large)
	font-style (e.g. normal, italic, or oblique )
font-weight
named(normal, bold, bolder, and lighter)
numeric values (100, 200, 300, 400, 500, 600, 700, 800, and 900)
letter-spacing	
(px or em) or normal (default)
line-height	
percentage: 200% is double-spacing.
margin (px or em);
	body {margin: 10px} 
	to eliminate: {margin:0}
margin-left
	(px or em), auto, or 0
margin-right
 	(px or em), auto, or 0
text-align
	center, justify, left, or right
text-decoration
	whether text is underlined; 
 	e.g. “none” means hyperlink not underlined
text-indent
	(px or em) or percentage
	indentation of first line
text-transform
	capitalization
	none (default), capitalize, uppercase, or lowercase
white-space
	normal (default), nowrap, pre, pre-line, or pre-wrap
width
	width of element
	(px or em), numeric percentage, or auto
Word-spacing
	Between words
(px or em), or normal